<template>
  <q-page class="q-pa-md">
    <div :style="{ width: '100%', height: '100%' }" class="flex justify-around items-center">
      <crane-self v-for="ele in craneData" :key="`crane${ele.craneNo}`" :craneNo="ele.craneNo" :craneInfo="ele" />
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import CraneSelf from './crane-self.vue';
import { useWebsocket } from 'src/pages/_sys/use-websocket1';
import { CraneProps } from './model';

export default defineComponent({
  name: 'yard-crane',

  components: {
    CraneSelf,
  },

  setup() {
    const craneData = ref<CraneProps[]>([
      {
        craneNo: '31',
      },
      {
        craneNo: '32',
      },
      {
        craneNo: '33',
      },
      {
        craneNo: '34',
      },
      {
        craneNo: '35',
      },
      {
        craneNo: '36',
      },
    ]);

    useWebsocket('CRANE_WEBSOCKET', info => {
      if (info.topic !== 'CRANE_WEBSOCKET') {
        return;
      }
      Object.keys(info.data).forEach(ele => {
        try {
          const { craneNo } = info.data[ele];
          craneData.value.forEach((crane, idx) => {
            if (crane.craneNo == craneNo) {
              craneData.value[idx] = info.data[ele];
            }
          });
        } catch (error: any) {
          console.log(error);
        }
      });
    });

    return { craneData };
  },
});
</script>
<style lang="scss" scoped>
.q-pa-md {
  min-height: auto !important;
}
</style>
